<template>
  <div class="bg-white rounded-sm mb-4 py-4 px-4 items-center flex">
    <div class="flex-1 flex">
      <el-button
        type="primary"
        :loading="loading"
        @click="handleClickAdd"
      >
        保存
      </el-button>
    </div>
    <search-tools
      :tools="['refresh']"
      @onClickRefresh="onClickRefresh"
    />
  </div>
  <div class="bg-white rounded-md py-4 px-4">
    <el-form
      ref="form"
      :model="formData"
      label-width="120px"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            prop="email"
            label="邮箱"
            :rules="[
              { required: true},
              { type: 'email'}
            ]"
          >
            <el-input v-model="formData.email" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="版权信息"
            required
            prop="copyright"
          >
            <el-input v-model="formData.copyright" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="linkedin">
            <el-input v-model="formData.linkedin" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="instagram">
            <el-input v-model="formData.instagram" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item
        label="公司地址"
        required=""
      >
        <el-input v-model="formData.address" />
      </el-form-item>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="网站Logo"
          >
            <el-upload
              :action="`${BASE_URL}upload`"
              :show-file-list="false"
              :on-success="handleLogoSuccess"
              :limit="1"
            >
              <img
                v-if="formData.logo_url"
                :src="formData.logo_url"
                width="150"
                height="150"
              >
              <div
                v-else
                class="border-dotted border-[#dcdfe6] border py-12 px-16"
              >
                <el-icon
                  class="avatar-uploader-icon"
                >
                  <Plus :size="60" />
                </el-icon>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Catalogue文件">
            <el-button
              type="primary"
              @click="isFileVisible=true"
            >
              点击设置文件
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item
        label="首页轮播图"
      >
        <el-upload
          :action="`${BASE_URL}upload`"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-error="onError"
          :on-success="handleCarouselSuccess"
          :file-list="formData.carousel_picture_url"
        >
          <el-icon
            :size="40"
          >
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="底部轮播图"
      >
        <el-upload
          :action="`${BASE_URL}upload`"
          list-type="picture-card"
          :on-preview="handleFootPictureCardPreview"
          :on-remove="handleFootCarouselRemove"
          :on-error="onError"
          :on-success="handleFootCarouselSuccess"
          :file-list="formData.foot_carousel_picture_url"
        >
          <el-icon
            :size="40"
          >
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="Contact轮播图"
      >
        <el-upload
          :action="`${BASE_URL}upload`"
          list-type="picture-card"
          :on-preview="handleAboutPictureCardPreview"
          :on-remove="handleAboutCarouselRemove"
          :on-error="onError"
          :on-success="handleAboutCarouselSuccess"
          :file-list="formData.about_carousel_picture_url"
        >
          <el-icon
            :size="40"
          >
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
  <setting-file
    v-model="isFileVisible"
    :file-list="c_file"
    :file_outside_url="formData.c_file_outside_url"
    @on-confirm="onFileConfirm"
  />
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import searchTools from '@/components/search-tools/index.vue'
import { Baseinfo as BaseInfoApi } from '@/api/baseinfo'
import notification from '@/utils/dict-notification'
import config from '@/utils/config'
import settingFile from '@/components/setting-file/index.vue'

const isFileVisible = ref(false)
const { BASE_URL } = config
const formData = ref({
  address: '',
  email: '',
  linkedin: '',
  copyright: '',
  instagram: '',
  carousel_img_id: [],
  carousel_picture_url: [],
  foot_carousel_picture_url: [],
  about_carousel_picture_url: [],
  logo_id: '',
  logo_url: '',
})

const loading = ref(false)

const handleLogoSuccess = (response) => {
  const [file] = response
  if (file) {
    formData.value.logo_id = file.id
    formData.value.logo_url = file.url
  }
}

const handleCarouselSuccess = (response) => {
  const [file] = response
  if (!formData.value.carousel_img_id)
    formData.value.carousel_img_id = []

  if (file)
    formData.value.carousel_img_id.push(file.id)
}

const handleFootCarouselSuccess = (response) => {
  const [file] = response
  if (!formData.value.foot_carousel_img_id)
    formData.value.foot_carousel_img_id = []

  if (file)
    formData.value.foot_carousel_img_id.push(file.id)
}

const handleAboutCarouselSuccess = (response) => {
  const [file] = response
  if (!formData.value.about_carousel_img_id)
    formData.value.about_carousel_img_id = []

  if (file)
    formData.value.about_carousel_img_id.push(file.id)
}

const onError = (err) => {
  const { message } = err
  const error = JSON.parse(message)
  notification(error.code, error.message)
}

const handleRemove = (file) => {
  if (file.response)
    [file] = file.response
  if (file) {
    const idx = formData.value.carousel_img_id.findIndex(id => file.id === id)
    if (idx !== -1)
      formData.value.carousel_img_id.splice(idx, 1)
  }
}

const handleFootCarouselRemove = (file) => {
  if (file.response)
    [file] = file.response
  if (file) {
    const idx = formData.value.foot_carousel_img_id.findIndex(id => file.id === id)
    if (idx !== -1)
      formData.value.foot_carousel_img_id.splice(idx, 1)
  }
}

const handleAboutCarouselRemove = (file) => {
  if (file.response)
    [file] = file.response
  if (file) {
    const idx = formData.value.about_carousel_img_id.findIndex(id => file.id === id)
    if (idx !== -1)
      formData.value.about_carousel_img_id.splice(idx, 1)
  }
}

const getBaseinfo = async () => {
  const data = await BaseInfoApi.getBaseinfo()
  formData.value = data
  formData.value.carousel_img_id = data.carousel_picture_url.map(img => img.id)
  formData.value.foot_carousel_img_id = data.foot_carousel_picture_url.map(img => img.id)
  formData.value.about_carousel_img_id = data.about_carousel_picture_url.map(img => img.id)
}

onMounted(async () => {
  await getBaseinfo()
})

const onClickRefresh = async () => {
  await getBaseinfo()
}

const handleClickAdd = async () => {
  loading.value = true
  const { message, code } = await BaseInfoApi.update(formData.value)
  notification(code, message).then(async () => {
    await getBaseinfo()
    loading.value = false
  })
}

const onFileConfirm = (val) => {
  formData.value.c_file_id = val.file_id
  formData.value.c_file_outside_url = val.file_outside_url
}

const c_file = computed(() => {
  if (formData.value.c_file_url) {
    return [
      {
        url: formData.value.c_file_url,
        name: formData.value.c_file_name,
      },
    ]
  }
  return []
})

</script>
